<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Telegram Bot UI</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
	body {
        background-image: url('{{ url_for('static', filename='1.jpg') }}');
        background-repeat: no-repeat;
        background-size: 653px 262px; /* 设置背景图片的大小 */
        background-position: 10px 250px; /* 第一个值是水平位置，第二个值是垂直位置 */
    }
	label {
        display: block;
        margin-bottom: 5px;
    }

    input[type="number"] {
        width: 50px;

    }
    #result-label {  
        position: absolute;  
        top: 200px;  
        left: 10px;  
    }
    #text1 {
        position: absolute;
        top: 285px; /* 距离页面顶部100px */
        left: 130px; /* 距离页面左侧50px */
    }

    #text2 {
        position: absolute;
        top: 285px; /* 距离页面顶部200px */
        left: 280px; /* 假设与text1水平对齐 */
    }

    #text3 {
        position: absolute;
        top: 365px; /* 距离页面顶部350px */
        left: 280px; /* 假设与text1和text2水平对齐 */
    }

    #text4 {
        position: absolute;
        top: 285px; /* 距离页面顶部500px */
        left: 450px; /* 假设与text1、text2和text3水平对齐 */
    }

    #calculate-button {
        position: absolute;
        top: 200px; /* 距离页面顶部500px */
        left: 150px; /* 假设与text1、text2和text3水平对齐 */
        padding: 10px 20px;
        cursor: pointer;
    }
    </style>
    <script>    
        $(document).ready(function() {    
            $('#send-button').click(function() {    
                var text = $('#message-input').val();    
                $.post('/receive_message', { text: text }, function(data) {    
                    alert(data); // 显示发送结果    
                });    
            });  
  
            $('#calculate-button').click(function() {  
                var text1 = parseFloat($('#text1').val());  
                var text2 = parseFloat($('#text2').val());  
                var text3 = parseFloat($('#text3').val());  
                var text4 = parseFloat($('#text4').val());  
  
                if (isNaN(text1) || isNaN(text2) || isNaN(text3) || isNaN(text4)) {  
                    alert('请输入有效的数字！');  
                    return;  
                }  
  
                var result = text1 * (text3 / 100) + text2 + (text4 * 10);  
                $('#result-label').text('计算结果: ' + result.toFixed(2));  
            });  
        });    
    </script>
</head>
<body>
<!-- 添加返回主页的超链接  <p>Return to the <a href="{{ url_for('index') }}">Home Page</a></p>   -->  

<!-- 或者添加一个返回主页的按钮 -->  
<button onclick="window.location.href='{{ url_for('index') }}'">主页</button> 
<h1>Telegram Bot Message Sender</h1>
<form>
    <label for="message">Message:</label>
    <input type="text" id="message-input" name="message">
    <button type="button" id="send-button">Send</button>
</form>

<h2>计算器</h2>
<form>
    <label for="text1"></label>
    <input type="number" id="text1" name="text1">

    <label for="text2"></label>
    <input type="number" id="text2" name="text2">

    <label for="text3"></label>
    <input type="number" id="text3" name="text3">

    <label for="text4"></label>
    <input type="number" id="text4" name="text4">

    <button type="button" id="calculate-button">打怪伤害计算</button>
</form>

<p id="result-label"></p>
</body>
</html>